import { message, Form, Input, Row, Col, TreeSelect } from 'antd'
import React, { useRef, useImperativeHandle, useState, useContext } from 'react'
import ConfigEditTable from '@/components/config-edit-table/index.jsx'
import './index.less'
import IconSelect from '@/components/icon-select/index.jsx'
import ConfigFormContext from '../configFormContext.js'
import { getTypeTree } from '@/api/type-tree.js'
import { useEffect } from 'react'

export const ConfigForm = React.forwardRef((props, ref) => {
  const {type, config, value, tableCom } = props
  const configFormContext = useContext(ConfigFormContext)

  const fieldNames = {
    label: 'name',
    value: 'id',
    children: 'children',
  }

  const [typeTreeData, setTypeTreeData] = useState(undefined)
  const requestTypeTree = () => {
    getTypeTree({ typeCode: configFormContext.treeTypeCode }).then((res) => {
      setTypeTreeData(res.data)
    })
  }

  const EditTableCom = tableCom || ConfigEditTable
  const [form] = Form.useForm()

  const formRef = useRef(null)

  const formProps = {
    initialValues: value,
    style: {
      height: '600px'
    }
  }

  // 方法暴露
  useImperativeHandle(
    ref,
    () => ({
      validateFields() {
        return formRef.current.validateFields()
      },
      getFieldsValue() {
        return formRef.current.getFieldsValue(true)
      }
    }),
    [config, tableCom]
  )

  const tableProps = {
    scroll: {y: 360}
  }

  useEffect(() => {
    if(configFormContext.treeTypeCode) {
      requestTypeTree()
    }
  }, [configFormContext])
  
  return (
    <Form
      name="config-form"
      ref={ formRef }
      form={form}
      { ...formProps }
    >
      <Row gutter={12}>
        <Col span={6}>
          <Form.Item label="模版名称" name="templateName">
            <Input placeholder='请输入' autoComplete='off'/>
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="模版编码" name="templateCode">
            <Input placeholder='请输入' autoComplete='off'/>
          </Form.Item>
        </Col>
        {
          configFormContext.treeTypeCode && <Col span={6}>
            <Form.Item label="选择分类" name="typeId">
            <TreeSelect
                fieldNames={fieldNames}
                showSearch
                checkable
                style={{
                  width: '100%',
                }}
                dropdownStyle={{
                  maxHeight: 300,
                  overflow: 'auto',
                }}
                placeholder="请选择"
                allowClear
                treeDefaultExpandAll
                treeData={typeTreeData}
              />
            </Form.Item>
          </Col>
        }
        {
          configFormContext.showIcon && <Col span={6}>
            <Form.Item label="模版图标" name="templateIcon">
              <IconSelect/>
            </Form.Item>
          </Col>
        }
      </Row>      
      <Form.Item label="" name="attrOrders">
        <EditTableCom tableProps={tableProps} isMove={true} isFirstDisabled={true}/>
      </Form.Item>
    </Form>
  )
})

ConfigForm.displayName = 'ConfigForm'

export default ConfigForm